M
MLOG
రియాక్ట్ సస్పెన్స్ రిసోర్స్ డీడూప్లికేషన్: డూప్లికేట్ అభ్యర్థనలను నివారించడం | MLOG | MLOG

ఇప్పుడు, UserResource cacheలో ఒక రిసోర్స్ ఇప్పటికే ఉందో లేదో తనిఖీ చేస్తుంది. ఒకవేళ ఉంటే, కాష్ చేయబడిన రిసోర్స్ తిరిగి ఇవ్వబడుతుంది. లేకపోతే, ఒక కొత్త అభ్యర్థన ప్రారంభించబడుతుంది, మరియు ఫలితంగా వచ్చే ప్రామిస్ కాష్‌లో నిల్వ చేయబడుతుంది. ఇది ప్రతి ప్రత్యేకమైన userId కోసం కేవలం ఒక అభ్యర్థన మాత్రమే చేయబడుతుందని నిర్ధారిస్తుంది.

2. ఒక ప్రత్యేక కాషింగ్ లైబ్రరీని ఉపయోగించడం (ఉదా., `lru-cache`)

మరింత సంక్లిష్టమైన కాషింగ్ దృష్టాంతాల కోసం, lru-cache లేదా అలాంటి ప్రత్యేక కాషింగ్ లైబ్రరీని ఉపయోగించడాన్ని పరిగణించండి. ఈ లైబ్రరీలు లీస్ట్ రీసెంట్లీ యూజ్డ్ (LRU) లేదా ఇతర పాలసీల ఆధారంగా కాష్ తొలగింపు వంటి ఫీచర్లను అందిస్తాయి, ఇది పెద్ద సంఖ్యలో రిసోర్స్‌లతో వ్యవహరించేటప్పుడు మెమరీ వినియోగాన్ని నిర్వహించడానికి చాలా కీలకం.

మొదట, లైబ్రరీని ఇన్‌స్టాల్ చేయండి:

            
npm install lru-cache

ఆ తర్వాత, దానిని మీ UserResourceలో ఇంటిగ్రేట్ చేయండి:

            
import React, { Suspense } from 'react';
import LRUCache from 'lru-cache';

const fetchUser = (userId) => {
  console.log(`Fetching user with ID: ${userId}`); // Simulate network request
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: userId, name: `User ${userId}`, email: `user${userId}@example.com` });
    }, 1000); // Simulate network latency
  });
};

const cache = new LRUCache({
  max: 100, // Maximum number of items in the cache
  ttl: 60000, // Time-to-live in milliseconds (1 minute)
});

const UserResource = (userId) => {
  if (!cache.has(userId)) {
    let promise = null;
    let status = 'pending'; // pending, success, error
    let result;

    const suspender = fetchUser(userId).then(
      (r) => {
        status = 'success';
        result = r;
        cache.set(userId, {
          read() {
            return result;
          },
        });
      },
      (e) => {
        status = 'error';
        result = e;
        cache.set(userId, {
          read() {
            throw result;
          },
        });
      }
    );

    cache.set(userId, {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            }
            return result;
        }
    });
  }

  return cache.get(userId);
};


const UserProfile = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
User Profile

      
ID: {user.id}

      
Name: {user.name}

      
Email: {user.email}

    

  );
};

const UserDetails = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
User Details

      
ID: {user.id}

      
Name: {user.name}

    

  );
};

const App = () => {
  return (
    Loading...
}> ); }; export default App;

ఈ విధానం కాష్ పరిమాణం మరియు గడువు పాలసీపై మరింత నియంత్రణను అందిస్తుంది.

3. `axios-extensions` వంటి లైబ్రరీలతో రిక్వెస్ట్ కోలెసింగ్

axios-extensions వంటి లైబ్రరీలు రిక్వెస్ట్ కోలెసింగ్ వంటి మరింత అధునాతన ఫీచర్లను అందిస్తాయి. రిక్వెస్ట్ కోలెసింగ్ బహుళ ఒకేలాంటి అభ్యర్థనలను ఒకే అభ్యర్థనగా కలుపుతుంది, ఇది నెట్‌వర్క్ వినియోగాన్ని మరింత ఆప్టిమైజ్ చేస్తుంది. అభ్యర్థనలు ఒకదానికొకటి చాలా దగ్గరగా ప్రారంభించబడిన దృష్టాంతాలలో ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది.

మొదట, లైబ్రరీని ఇన్‌స్టాల్ చేయండి:

            
npm install axios axios-extensions

ఆ తర్వాత, axios-extensions ద్వారా అందించబడిన cache అడాప్టర్‌తో ఆక్సియోస్‌ను కాన్ఫిగర్ చేయండి.

`axios-extensions` ఉపయోగించి ఒక రిసోర్స్‌ను సృష్టించే ఉదాహరణ:

            
import React, { Suspense } from 'react';
import axios from 'axios';
import { cacheAdapterEnhancer, throttleAdapterEnhancer } from 'axios-extensions';

const instance = axios.create({
  baseURL: 'https://api.example.com', // Replace with your API endpoint
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, { enabledByDefault: true }),
});

const fetchUser = async (userId) => {
  console.log(`Fetching user with ID: ${userId}`); // Simulate network request
  const response = await instance.get(`/users/${userId}`);
  return response.data;
};


const UserResource = (userId) => {
    let promise = null;
    let status = 'pending'; // pending, success, error
    let result;

    const suspender = fetchUser(userId).then(
        (r) => {
            status = 'success';
            result = r;
        },
        (e) => {
            status = 'error';
            result = e;
        }
    );

    return {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            }
            return result;
        },
    };
};


const UserProfile = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
User Profile

      
ID: {user.id}

      
Name: {user.name}

      
Email: {user.email}

    

  );
};

const UserDetails = ({ userId }) => {
  const user = UserResource(userId).read();
  return (
    

      
User Details

      
ID: {user.id}

      
Name: {user.name}

    

  );
};

const App = () => {
  return (
    Loading...
}> ); }; export default App;

ఇది కాష్ అడాప్టర్‌ను ఉపయోగించడానికి ఆక్సియోస్‌ను కాన్ఫిగర్ చేస్తుంది, అభ్యర్థన కాన్ఫిగరేషన్ ఆధారంగా ప్రతిస్పందనలను స్వయంచాలకంగా కాష్ చేస్తుంది. cacheAdapterEnhancer ఫంక్షన్ కాష్‌ను కాన్ఫిగర్ చేయడానికి గరిష్ట కాష్ పరిమాణం లేదా గడువు సమయాన్ని సెట్ చేయడం వంటి ఎంపికలను అందిస్తుంది. throttleAdapterEnhancerను కూడా ఒక నిర్దిష్ట కాల వ్యవధిలో సర్వర్‌కు చేయబడిన అభ్యర్థనల సంఖ్యను పరిమితం చేయడానికి ఉపయోగించవచ్చు, ఇది పనితీరును మరింత ఆప్టిమైజ్ చేస్తుంది.

రిసోర్స్ డీడూప్లికేషన్ కోసం ఉత్తమ పద్ధతులు

డేటా ఫెచింగ్ మరియు డీడూప్లికేషన్ కోసం గ్లోబల్ పరిగణనలు

ప్రపంచవ్యాప్త ప్రేక్షకుల కోసం డేటా ఫెచింగ్ వ్యూహాలను రూపొందించేటప్పుడు, అనేక అంశాలు పరిగణనలోకి వస్తాయి:

ఉదాహరణకు, ప్రపంచవ్యాప్త ప్రేక్షకులను లక్ష్యంగా చేసుకున్న ఒక ట్రావెల్ బుకింగ్ వెబ్‌సైట్, విభిన్న ప్రాంతాలలో ఉన్న సర్వర్‌ల నుండి విమాన మరియు హోటల్ లభ్యత డేటాను అందించడానికి ఒక CDNను ఉపయోగించవచ్చు. వెబ్‌సైట్ వినియోగదారు స్థానిక కరెన్సీలో ధరలను ప్రదర్శించడానికి ఒక కరెన్సీ మార్పిడి APIని కూడా ఉపయోగిస్తుంది మరియు భాష ప్రాధాన్యతల ఆధారంగా శోధన ఫలితాలను ఫిల్టర్ చేయడానికి ఎంపికలను అందిస్తుంది.

ముగింపు

సస్పెన్స్ ఉపయోగించే రియాక్ట్ అప్లికేషన్‌ల కోసం రిసోర్స్ డీడూప్లికేషన్ ఒక ముఖ్యమైన ఆప్టిమైజేషన్ టెక్నిక్. డూప్లికేట్ డేటా ఫెచింగ్ అభ్యర్థనలను నివారించడం ద్వారా, మీరు పనితీరును గణనీయంగా మెరుగుపరచవచ్చు, సర్వర్ లోడ్‌ను తగ్గించవచ్చు మరియు వినియోగదారు అనుభవాన్ని మెరుగుపరచవచ్చు. మీరు ఒక సాధారణ ప్రామిస్ కాష్‌ను అమలు చేయడానికి ఎంచుకున్నా లేదా lru-cache లేదా axios-extensions వంటి మరింత అధునాతన లైబ్రరీలను ఉపయోగించినా, ముఖ్యమైన విషయం ఏమిటంటే అంతర్లీన సూత్రాలను అర్థం చేసుకోవడం మరియు మీ నిర్దిష్ట అవసరాలకు ఉత్తమంగా సరిపోయే పరిష్కారాన్ని ఎంచుకోవడం. విభిన్న ప్రేక్షకుల కోసం మీ డేటా ఫెచింగ్ వ్యూహాలను రూపొందించేటప్పుడు CDNలు, స్థానికీకరణ మరియు యాక్సెసిబిలిటీ వంటి గ్లోబల్ కారకాలను పరిగణనలోకి తీసుకోవడం గుర్తుంచుకోండి. ఈ ఉత్తమ పద్ధతులను అమలు చేయడం ద్వారా, మీరు వేగవంతమైన, మరింత సమర్థవంతమైన మరియు మరింత యూజర్-ఫ్రెండ్లీ రియాక్ట్ అప్లికేషన్‌లను నిర్మించవచ్చు.